<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>旅行故事生成器 · 探索世界的每一个角落</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">

  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#165DFF',
            secondary: '#FF7D00',
            neutral: '#F5F7FA',
            dark: '#333647',
          },
          fontFamily: {
            inter: ['Inter', 'sans-serif'],
          },
        },
      }
    }
  </script>

  <style type="text/tailwindcss">
    @layer utilities {
      .text-shadow {
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      }
      .text-shadow-lg {
        text-shadow: 0 4px 8px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.08);
      }
      .animate-float {
        animation: float 6s ease-in-out infinite;
      }
      .animate-float-delay-1 {
        animation: float 6s ease-in-out 1s infinite;
      }
      .animate-float-delay-2 {
        animation: float 6s ease-in-out 2s infinite;
      }
      .animate-pulse-slow {
        animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
      }
      .animate-scale {
        animation: scale 0.3s ease-in-out;
      }
      .animate-sparkle {
        animation: sparkle 0.8s ease-out forwards;
      }
      .animate-spin-slow {
        animation: spin 8s linear infinite;
      }
      .animate-shake {
        animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
      }
      .animate-fadeInUp {
        animation: fadeInUp 0.5s ease forwards;
      }
      .animate-bounceIn {
        animation: bounceIn 0.6s cubic-bezier(0.215, 0.610, 0.355, 1.000) forwards;
      }
      .story-card {
        transition: all 0.3s ease;
      }
      .story-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
      }
      .scroll-indicator {
        height: 3px;
        background-color: #165DFF;
        width: 0%;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 100;
        transition: width 0.1s ease;
      }
      .card-hover {
        transition: all 0.3s ease;
      }
      .card-hover:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
      }
      .btn-pulse {
        animation: pulse 2s infinite;
      }
      @keyframes pulse {
        0% {
          box-shadow: 0 0 0 0 rgba(22, 93, 255, 0.4);
        }
        70% {
          box-shadow: 0 0 0 10px rgba(22, 93, 255, 0);
        }
        100% {
          box-shadow: 0 0 0 0 rgba(22, 93, 255, 0);
        }
      }
    }

    .hero-gradient {
      background: linear-gradient(135deg, rgba(22, 93, 255, 0.8) 0%, rgba(22, 93, 255, 0.4) 100%);
    }

    .nav-link {
      position: relative;
    }

    .nav-link::after {
      content: '';
      position: absolute;
      width: 0;
      height: 2px;
      bottom: -4px;
      left: 0;
      background-color: #165DFF;
      transition: width 0.3s ease;
    }

    .nav-link:hover::after {
      width: 100%;
    }
  </style>
</head>

<body class="font-inter bg-neutral text-dark min-h-screen overflow-x-hidden">
  <!-- 滚动进度条 -->
  <div class="progress-bar" id="progress-bar"></div>

  <!-- 页面容器 -->
  <div id="app" class="min-h-screen flex flex-col relative z-10">
    <!-- 导航栏 -->
    <nav class="fixed top-0 left-0 right-0 bg-white/90 backdrop-blur-md z-50 transition-all duration-300 shadow-sm">
      <div class="container mx-auto px-4 py-4 flex justify-between items-center">
        <a href="#home" class="text-2xl font-bold text-primary flex items-center">
          <i class="fa-solid fa-compass mr-2"></i>
          <span>旅行足迹</span>
        </a>

        <div class="hidden md:flex space-x-8">
          <a href="#home" class="nav-link font-medium">首页</a>
          <a href="#story-generator" class="nav-link font-medium">故事生成器</a>
          <a href="#popular-stories" class="nav-link font-medium">热门故事</a>
          <a href="#categories" class="nav-link font-medium">故事分类</a>
        </div>

        <div class="md:hidden">
          <button id="menu-toggle" class="text-dark focus:outline-none">
            <i class="fa-solid fa-bars text-xl"></i>
          </button>
        </div>
      </div>

      <!-- 移动端菜单 -->
      <div id="mobile-menu" class="hidden md:hidden bg-white border-t">
        <div class="container mx-auto px-4 py-3 flex flex-col space-y-3">
          <a href="#home" class="py-2 font-medium">首页</a>
          <a href="#story-generator" class="py-2 font-medium">故事生成器</a>
          <a href="#popular-stories" class="py-2 font-medium">热门故事</a>
          <a href="#categories" class="py-2 font-medium">故事分类</a>
        </div>
      </div>
    </nav>

    <!-- 页面内容 -->
    <main class="flex-grow pt-16">
      <!-- 英雄区域 -->
      <section id="home" class="relative py-24 md:py-32 bg-gradient-to-b from-primary/10 to-white overflow-hidden">
        <div class="container mx-auto px-4 relative z-10">
          <div class="max-w-4xl mx-auto text-center">
            <h1 class="text-[clamp(2rem,5vw,3.5rem)] font-bold text-dark mb-6 leading-tight animate-fadeInUp">
              发现未知的旅行故事
            </h1>
            <p class="text-lg md:text-xl text-gray-600 mb-8 max-w-2xl mx-auto animate-fadeInUp" style="animation-delay: 0.2s">
              点击按钮，随机生成一个令人惊叹的旅行故事，激发你的下一次冒险
            </p>
            <div class="flex flex-col sm:flex-row justify-center gap-4 animate-fadeInUp" style="animation-delay: 0.4s">
              <a href="#story-generator" class="bg-primary hover:bg-primary/90 text-white py-3 px-8 rounded-full transition-all duration-300 transform hover:scale-105 flex items-center justify-center btn-pulse">
                <i class="fa-solid fa-magic mr-2"></i> 开始生成故事
              </a>
              <a href="#popular-stories" class="bg-white border border-primary text-primary hover:bg-primary/5 py-3 px-8 rounded-full transition-all duration-300 transform hover:scale-105 flex items-center justify-center">
                <i class="fa-solid fa-fire mr-2"></i> 查看热门故事
              </a>
            </div>
          </div>
        </div>
        
        <!-- 背景装饰 -->
        <div class="absolute top-0 left-0 w-full h-full overflow-hidden">
          <div class="absolute top-20 left-[10%] w-40 h-40 bg-primary/5 rounded-full animate-float"></div>
          <div class="absolute top-40 right-[15%] w-60 h-60 bg-secondary/5 rounded-full animate-float-delay-1"></div>
          <div class="absolute bottom-20 left-[20%] w-50 h-50 bg-primary/5 rounded-full animate-float-delay-2"></div>
        </div>
      </section>

      <!-- 随机故事生成器 -->
      <section id="story-generator" class="py-20 bg-white">
        <div class="container mx-auto px-4">
          <div class="text-center mb-12">
            <h2 class="text-3xl font-bold text-dark mb-4">旅行故事生成器</h2>
            <p class="text-gray-600 max-w-2xl mx-auto">每次点击都会随机生成一个独特的旅行故事，带你领略世界各地的奇妙经历</p>
          </div>
          
          <div class="max-w-4xl mx-auto">
            <div class="bg-neutral rounded-2xl shadow-sm overflow-hidden">
              <div class="relative">
                <img id="story-image" src="https://picsum.photos/id/1036/1200/600" alt="故事图片" class="w-full h-64 md:h-80 object-cover">
                <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex items-end">
                  <div class="p-6 md:p-8 text-white">
                    <h3 id="story-title" class="text-2xl font-bold mb-2">迷失在东京的霓虹雨中</h3>
                    <div class="flex items-center">
                      <span id="story-category" class="bg-primary/80 text-white text-sm py-1 px-3 rounded-full">城市探索</span>
                      <span class="mx-2">•</span>
                      <span id="story-location" class="text-white/90"><i class="fa-solid fa-map-marker-alt mr-1"></i> 东京, 日本</span>
                    </div>
                  </div>
                </div>
              </div>
              
              <div class="p-6 md:p-8">
                <div class="flex justify-between items-center mb-6">
                  <div class="flex items-center">
                    <img src="https://picsum.photos/id/1005/200/200" alt="作者头像" class="w-10 h-10 rounded-full mr-3">
                    <div>
                      <p class="font-medium">李明</p>
                      <p class="text-sm text-gray-500">旅行作家</p>
                    </div>
                  </div>
                  <div class="flex space-x-4">
                    <button class="text-gray-500 hover:text-primary transition-colors">
                      <i class="fa-solid fa-heart"></i>
                    </button>
                    <button class="text-gray-500 hover:text-primary transition-colors">
                      <i class="fa-solid fa-bookmark"></i>
                    </button>
                    <button class="text-gray-500 hover:text-primary transition-colors">
                      <i class="fa-solid fa-share-alt"></i>
                    </button>
                  </div>
                </div>
                
                <div id="story-content" class="prose max-w-none">
                  <p>东京的雨总是来得突然。那天傍晚，我漫步在新宿的街头，霓虹灯光在雨幕中交织成一幅绚丽的画卷。突然，豆大的雨点砸在地面上，瞬间将街道变成了一片反光的镜子。</p>
                  <p>我慌忙躲进一家小小的居酒屋，木质的门帘被雨水打湿，散发着淡淡的木香。店内温暖的灯光和嘈杂的人声让我感到一丝安心。老板娘热情地招呼我坐下，推荐了他们的招牌拉面。</p>
                  <p>坐在吧台前，我看着厨师熟练地揉面、拉面，仿佛在表演一门艺术。不一会儿，一碗热气腾腾的拉面摆在我面前，浓郁的汤汁上漂浮着几片叉烧，翠绿的葱花点缀其间。</p>
                  <p>品尝着美味的拉面，我和旁边的上班族聊了起来。他告诉我，在东京这样的大城市，每个人都有自己的故事，而居酒屋就是这些故事交汇的地方。雨还在下，但我的心已经被这份温暖所包围。</p>
                  <p>当我走出居酒屋时，雨已经停了。街道上的积水倒映着五彩斑斓的霓虹灯，仿佛整个城市都在闪烁。我深吸一口气，感受着雨后清新的空气，心中充满了对这座城市的喜爱。</p>
                </div>
                
                <div class="mt-8 pt-6 border-t border-gray-200">
                  <div class="flex flex-wrap gap-3">
                    <span class="bg-gray-100 text-gray-700 text-sm py-1 px-3 rounded-full">#东京</span>
                    <span class="bg-gray-100 text-gray-700 text-sm py-1 px-3 rounded-full">#日本</span>
                    <span class="bg-gray-100 text-gray-700 text-sm py-1 px-3 rounded-full">#美食</span>
                    <span class="bg-gray-100 text-gray-700 text-sm py-1 px-3 rounded-full">#城市</span>
                    <span class="bg-gray-100 text-gray-700 text-sm py-1 px-3 rounded-full">#雨天</span>
                  </div>
                </div>
              </div>
            </div>
            
            <div class="text-center mt-10">
              <button id="generate-new-story" class="bg-primary hover:bg-primary/90 text-white py-3 px-8 rounded-full transition-all duration-300 transform hover:scale-105 flex items-center justify-center mx-auto btn-pulse">
                <i class="fa-solid fa-random mr-2"></i> 生成新故事
              </button>
            </div>
          </div>
        </div>
      </section>

      <!-- 热门故事 -->
      <section id="popular-stories" class="py-20 bg-neutral">
        <div class="container mx-auto px-4">
          <div class="text-center mb-12">
            <h2 class="text-3xl font-bold text-dark mb-4">热门故事</h2>
            <p class="text-gray-600 max-w-2xl mx-auto">这些是用户最喜欢的旅行故事，也许能给你带来灵感</p>
          </div>
          
          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            <div class="bg-white rounded-xl shadow-sm overflow-hidden story-card">
              <div class="relative">
                <img src="https://picsum.photos/id/1037/600/400" alt="故事图片" class="w-full h-48 object-cover">
                <div class="absolute top-4 left-4">
                  <span class="bg-primary/80 text-white text-sm py-1 px-3 rounded-full">自然探索</span>
                </div>
              </div>
              <div class="p-6">
                <h3 class="font-bold text-lg mb-2">阿尔卑斯山的日出冒险</h3>
                <p class="text-gray-600 mb-4 line-clamp-3">凌晨三点，我们就开始了攀登阿尔卑斯山的旅程。当第一缕阳光洒在雪山上时，整个世界仿佛都被染成了金色...</p>
                <div class="flex justify-between items-center">
                  <div class="flex items-center">
                    <img src="https://picsum.photos/id/1001/100/100" alt="作者头像" class="w-8 h-8 rounded-full mr-2">
                    <span class="text-sm text-gray-500">张华</span>
                  </div>
                  <div class="flex items-center text-sm text-gray-500">
                    <i class="fa-solid fa-heart mr-1"></i> 245
                  </div>
                </div>
              </div>
            </div>
            
            <div class="bg-white rounded-xl shadow-sm overflow-hidden story-card">
              <div class="relative">
                <img src="https://picsum.photos/id/1039/600/400" alt="故事图片" class="w-full h-48 object-cover">
                <div class="absolute top-4 left-4">
                  <span class="bg-secondary/80 text-white text-sm py-1 px-3 rounded-full">文化体验</span>
                </div>
              </div>
              <div class="p-6">
                <h3 class="font-bold text-lg mb-2">摩洛哥蓝城的色彩之旅</h3>
                <p class="text-gray-600 mb-4 line-clamp-3">走进舍夫沙万的小巷，仿佛置身于蓝色的童话世界。每一面墙、每一扇门都被涂上了不同深浅的蓝色...</p>
                <div class="flex justify-between items-center">
                  <div class="flex items-center">
                    <img src="https://picsum.photos/id/1002/100/100" alt="作者头像" class="w-8 h-8 rounded-full mr-2">
                    <span class="text-sm text-gray-500">王芳</span>
                  </div>
                  <div class="flex items-center text-sm text-gray-500">
                    <i class="fa-solid fa-heart mr-1"></i> 189
                  </div>
                </div>
              </div>
            </div>
            
            <div class="bg-white rounded-xl shadow-sm overflow-hidden story-card">
              <div class="relative">
                <img src="https://picsum.photos/id/1040/600/400" alt="故事图片" class="w-full h-48 object-cover">
                <div class="absolute top-4 left-4">
                  <span class="bg-primary/80 text-white text-sm py-1 px-3 rounded-full">海岛度假</span>
                </div>
              </div>
              <div class="p-6">
                <h3 class="font-bold text-lg mb-2">马尔代夫的梦幻之旅</h3>
                <p class="text-gray-600 mb-4 line-clamp-3">水上别墅、洁白的沙滩、清澈见底的海水，马尔代夫的一切都如梦如幻。在这里，时间仿佛静止了...</p>
                <div class="flex justify-between items-center">
                  <div class="flex items-center">
                    <img src="https://picsum.photos/id/1003/100/100" alt="作者头像" class="w-8 h-8 rounded-full mr-2">
                    <span class="text-sm text-gray-500">刘伟</span>
                  </div>
                  <div class="flex items-center text-sm text-gray-500">
                    <i class="fa-solid fa-heart mr-1"></i> 312
                  </div>
                </div>
              </div>
            </div>
          </div>
          
          <div class="text-center mt-12">
            <button class="bg-white border border-primary text-primary hover:bg-primary/5 font-medium py-3 px-8 rounded-full transition-all duration-300 transform hover:scale-105">
              查看更多故事
            </button>
          </div>
        </div>
      </section>

      <!-- 故事分类 -->
      <section id="categories" class="py-20 bg-white">
        <div class="container mx-auto px-4">
          <div class="text-center mb-12">
            <h2 class="text-3xl font-bold text-dark mb-4">故事分类</h2>
            <p class="text-gray-600 max-w-2xl mx-auto">选择你感兴趣的故事类型，发现更多精彩内容</p>
          </div>
          
          <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
            <div class="bg-neutral rounded-xl p-6 text-center card-hover">
              <div class="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-4">
                <i class="fa-solid fa-city text-primary text-2xl"></i>
              </div>
              <h3 class="font-bold mb-2">城市探索</h3>
              <p class="text-gray-600 text-sm">探索世界各地的城市风光和文化</p>
            </div>
            
            <div class="bg-neutral rounded-xl p-6 text-center card-hover">
              <div class="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-4">
                <i class="fa-solid fa-mountain text-primary text-2xl"></i>
              </div>
              <h3 class="font-bold mb-2">自然探险</h3>
              <p class="text-gray-600 text-sm">探索大自然的壮丽景色和奇观</p>
            </div>
            
            <div class="bg-neutral rounded-xl p-6 text-center card-hover">
              <div class="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-4">
                <i class="fa-solid fa-utensils text-primary text-2xl"></i>
              </div>
              <h3 class="font-bold mb-2">美食之旅</h3>
              <p class="text-gray-600 text-sm">品尝世界各地的美食和特色小吃</p>
            </div>
            
            <div class="bg-neutral rounded-xl p-6 text-center card-hover">
              <div class="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-4">
                <i class="fa-solid fa-camera text-primary text-2xl"></i>
              </div>
              <h3 class="font-bold mb-2">摄影故事</h3>
              <p class="text-gray-600 text-sm">用镜头记录旅途中的精彩瞬间</p>
            </div>
          </div>
        </div>
      </section>

      <!-- 订阅区域 -->
      <section class="py-20 bg-primary/10">
        <div class="container mx-auto px-4">
          <div class="max-w-3xl mx-auto text-center">
            <h2 class="text-2xl md:text-3xl font-bold text-dark mb-6">订阅我的旅行故事</h2>
            <p class="text-gray-600 mb-8">获取最新的旅行灵感和故事，不错过任何精彩内容</p>
            
            <form class="flex flex-col sm:flex-row gap-4 max-w-xl mx-auto">
              <input type="email" placeholder="输入你的邮箱地址" class="flex-grow px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary">
              <button type="submit" class="bg-primary hover:bg-primary/90 text-white py-3 px-8 rounded-lg transition-all duration-300 transform hover:scale-105 whitespace-nowrap">
                订阅更新
              </button>
            </form>
          </div>
        </div>
      </section>
    </main>

    <!-- 页脚 -->
    <footer class="bg-dark text-white py-12">
      <div class="container mx-auto px-4">
        <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
          <div>
            <h3 class="text-xl font-bold mb-4">旅行足迹</h3>
            <p class="text-gray-400 mb-4">记录旅途中的美好瞬间，分享独特的文化体验</p>
            <div class="flex space-x-4">
              <a href="#" class="text-gray-400 hover:text-white transition-colors">
                <i class="fa-brands fa-weibo"></i>
              </a>
              <a href="#" class="text-gray-400 hover:text-white transition-colors">
                <i class="fa-brands fa-wechat"></i>
              </a>
              <a href="#" class="text-gray-400 hover:text-white transition-colors">
                <i class="fa-brands fa-instagram"></i>
              </a>
              <a href="#" class="text-gray-400 hover:text-white transition-colors">
                <i class="fa-brands fa-youtube"></i>
              </a>
            </div>
          </div>
          
          <div>
            <h3 class="text-lg font-bold mb-4">快速链接</h3>
            <ul class="space-y-2">
              <li><a href="#home" class="text-gray-400 hover:text-white transition-colors">首页</a></li>
              <li><a href="#story-generator" class="text-gray-400 hover:text-white transition-colors">故事生成器</a></li>
              <li><a href="#popular-stories" class="text-gray-400 hover:text-white transition-colors">热门故事</a></li>
              <li><a href="#categories" class="text-gray-400 hover:text-white transition-colors">故事分类</a></li>
            </ul>
          </div>
          
          <div>
            <h3 class="text-lg font-bold mb-4">旅行资源</h3>
            <ul class="space-y-2">
              <li><a href="#" class="text-gray-400 hover:text-white transition-colors">旅行攻略</a></li>
              <li><a href="#" class="text-gray-400 hover:text-white transition-colors">装备推荐</a></li>
              <li><a href="#" class="text-gray-400 hover:text-white transition-colors">摄影技巧</a></li>
              <li><a href="#" class="text-gray-400 hover:text-white transition-colors">目的地指南</a></li>
            </ul>
          </div>
          
          <div>
            <h3 class="text-lg font-bold mb-4">联系我</h3>
            <ul class="space-y-2">
              <li class="flex items-center">
                <i class="fa-solid fa-envelope mr-2 text-gray-400"></i>
                <span class="text-gray-400">contact@traveljournal.com</span>
              </li>
              <li class="flex items-center">
                <i class="fa-solid fa-phone mr-2 text-gray-400"></i>
                <span class="text-gray-400">+86 123 4567 8910</span>
              </li>
            </ul>
          </div>
        </div>
        
        <div class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-500">
          <p>&copy; 2023 旅行足迹. 保留所有权利.</p>
        </div>
      </div>
    </footer>
  </div>

  <script>
    // 移动菜单切换
    document.getElementById('menu-toggle').addEventListener('click', function() {
      const mobileMenu = document.getElementById('mobile-menu');
      mobileMenu.classList.toggle('hidden');
    });

    // 平滑滚动
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
      anchor.addEventListener('click', function (e) {
        e.preventDefault();
        
        const targetId = this.getAttribute('href');
        const targetElement = document.querySelector(targetId);
        
        if (targetElement) {
          window.scrollTo({
            top: targetElement.offsetTop - 80,
            behavior: 'smooth'
          });
          
          // 关闭移动菜单
          document.getElementById('mobile-menu').classList.add('hidden');
        }
      });
    });

    // 导航栏滚动效果
    window.addEventListener('scroll', function() {
      const nav = document.querySelector('nav');
      if (window.scrollY > 50) {
        nav.classList.add('shadow-md');
        nav.classList.remove('shadow-sm');
      } else {
        nav.classList.remove('shadow-md');
        nav.classList.add('shadow-sm');
      }
      
      // 更新滚动进度条
      const winScroll = document.body.scrollTop || document.documentElement.scrollTop;
      const height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
      const scrolled = (winScroll / height) * 100;
      document.getElementById("progress-bar").style.width = scrolled + "%";
    });

    // 故事数据
    const stories = [
      {
        title: "迷失在东京的霓虹雨中",
        location: "东京, 日本",
        category: "城市探索",
        image: "https://picsum.photos/id/1036/1200/600",
        content: `<p>东京的雨总是来得突然。那天傍晚，我漫步在新宿的街头，霓虹灯光在雨幕中交织成一幅绚丽的画卷。突然，豆大的雨点砸在地面上，瞬间将街道变成了一片反光的镜子。</p>
          <p>我慌忙躲进一家小小的居酒屋，木质的门帘被雨水打湿，散发着淡淡的木香。店内温暖的灯光和嘈杂的人声让我感到一丝安心。老板娘热情地招呼我坐下，推荐了他们的招牌拉面。</p>
          <p>坐在吧台前，我看着厨师熟练地揉面、拉面，仿佛在表演一门艺术。不一会儿，一碗热气腾腾的拉面摆在我面前，浓郁的汤汁上漂浮着几片叉烧，翠绿的葱花点缀其间。</p>
          <p>品尝着美味的拉面，我和旁边的上班族聊了起来。他告诉我，在东京这样的大城市，每个人都有自己的故事，而居酒屋就是这些故事交汇的地方。雨还在下，但我的心已经被这份温暖所包围。</p>
          <p>当我走出居酒屋时，雨已经停了。街道上的积水倒映着五彩斑斓的霓虹灯，仿佛整个城市都在闪烁。我深吸一口气，感受着雨后清新的空气，心中充满了对这座城市的喜爱。</p>`,
        author: "李明",
        avatar: "https://picsum.photos/id/1005/200/200",
        likes: 245
      },
      {
        title: "阿尔卑斯山的日出冒险",
        location: "瑞士阿尔卑斯山",
        category: "自然探险",
        image: "https://picsum.photos/id/1037/1200/600",
        content: `<p>凌晨三点，我们就开始了攀登阿尔卑斯山的旅程。天空还是一片漆黑，只有头顶的星星闪烁着微弱的光芒。向导告诉我们，日出前的这段路是最艰难的，但也是最值得的。</p>
          <p>随着海拔的升高，空气变得越来越稀薄，每走一步都需要付出更多的努力。但当第一缕阳光洒在雪山上时，所有的疲惫都烟消云散了。整个世界仿佛都被染成了金色，雪山、冰川、云海，构成了一幅绝美的画卷。</p>
          <p>我们找了一块平坦的岩石坐下，静静地欣赏着这壮观的景色。向导给我们讲述了阿尔卑斯山的历史和传说，让我们对这座山有了更深的了解。</p>
          <p>下山的路上，阳光更加明媚，我们看到了许多野生动物，如土拨鼠、岩羚羊等。这次日出冒险，不仅让我领略了大自然的壮丽，也让我感受到了挑战自我的乐趣。</p>`,
        author: "张华",
        avatar: "https://picsum.photos/id/1001/200/200",
        likes: 312
      },
      {
        title: "摩洛哥蓝城的色彩之旅",
        location: "舍夫沙万, 摩洛哥",
        category: "文化体验",
        image: "https://picsum.photos/id/1039/1200/600",
        content: `<p>走进舍夫沙万的小巷，仿佛置身于蓝色的童话世界。每一面墙、每一扇门都被涂上了不同深浅的蓝色，从浅蓝到深蓝，从天空蓝到海洋蓝，让人眼花缭乱。</p>
          <p>据说，蓝色在当地代表着天空和天堂，也有驱虫和降温的作用。但对我来说，这些蓝色的建筑更像是艺术家的画布，每一处细节都充满了创意和想象力。</p>
          <p>我沿着狭窄的小巷漫步，不时会遇到当地的居民。他们热情地和我打招呼，邀请我品尝当地的薄荷茶。在一家小咖啡馆里，我结识了一位老人，他给我讲述了蓝城的历史和文化，让我对这座城市有了更深的了解。</p>
          <p>除了蓝色的建筑，舍夫沙万还有许多值得一游的地方，如老城区的市场、清真寺等。在这里，时间仿佛变慢了，让人可以静下心来，感受生活的美好。</p>`,
        author: "王芳",
        avatar: "https://picsum.photos/id/1002/200/200",
        likes: 189
      },
      {
        title: "马尔代夫的梦幻之旅",
        location: "马尔代夫",
        category: "海岛度假",
        image: "https://picsum.photos/id/1040/1200/600",
        content: `<p>水上别墅、洁白的沙滩、清澈见底的海水，马尔代夫的一切都如梦如幻。当我第一次踏上这片土地时，仿佛走进了一个世外桃源。</p>
          <p>我们住在一座水上别墅里，从阳台上可以直接看到海底的珊瑚和鱼群。每天早晨，我都会被海浪的声音唤醒，然后走到阳台上，欣赏美丽的日出。</p>
          <p>白天，我们会参加各种水上活动，如浮潜、潜水、帆船等。马尔代夫的海水非常清澈，能见度可以达到30米以上，让我们可以近距离观察海底世界的奇妙。</p>
          <p>晚上，我们会在沙滩上享用浪漫的晚餐，听着海浪的声音，看着满天的繁星。有时候，我们还会参加当地的文化活动，了解马尔代夫的历史和传统。</p>
          <p>这次马尔代夫之旅，让我感受到了大自然的美丽和宁静。在这里，时间仿佛静止了，让人可以忘记一切烦恼，享受当下的美好。</p>`,
        author: "刘伟",
        avatar: "https://picsum.photos/id/1003/200/200",
        likes: 425
      },
      {
        title: "撒哈拉沙漠的星空之夜",
        location: "撒哈拉沙漠, 突尼斯",
        category: "荒野探险",
        image: "https://picsum.photos/id/1041/1200/600",
        content: `<p>当我们的越野车驶入撒哈拉沙漠时，我被眼前的景象震撼了。一望无际的沙丘在阳光的照耀下呈现出金黄色的光芒，仿佛一片金色的海洋。</p>
          <p>我们在沙漠中露营，晚上，导游点燃了篝火，我们围坐在一起，品尝着当地的美食，听着导游讲述撒哈拉沙漠的故事。当夜幕降临，星星一颗一颗地出现在天空中，越来越多，越来越亮，最终形成了一片璀璨的星空。</p>
          <p>我躺在沙漠上，仰望着星空，感受着沙漠的宁静和神秘。在这里，没有城市的喧嚣和污染，只有纯净的星空和自己的心跳声。</p>
          <p>第二天清晨，我们在日出前起床，爬上了一座沙丘。当太阳从地平线上升起时，整个沙漠都被染成了红色，美轮美奂。这次撒哈拉之旅，让我对大自然有了更深的敬畏和热爱。</p>`,
        author: "赵强",
        avatar: "https://picsum.photos/id/1004/200/200",
        likes: 278
      }
    ];

    // 生成随机故事
    document.getElementById('generate-new-story').addEventListener('click', function() {
      const randomIndex = Math.floor(Math.random() * stories.length);
      const story = stories[randomIndex];
      
      // 添加动画效果
      const storyContainer = document.querySelector('#story-generator .bg-neutral');
      storyContainer.classList.add('animate-shake');
      
      setTimeout(() => {
        // 更新故事内容
        document.getElementById('story-image').src = story.image;
        document.getElementById('story-title').textContent = story.title;
        document.getElementById('story-location').innerHTML = `<i class="fa-solid fa-map-marker-alt mr-1"></i> ${story.location}`;
        document.getElementById('story-category').textContent = story.category;
        document.getElementById('story-content').innerHTML = story.content;
        document.querySelector('#story-generator .flex.items-center img').src = story.avatar;
        document.querySelector('#story-generator .flex.items-center p.font-medium').textContent = story.author;
        
        // 移除动画效果
        storyContainer.classList.remove('animate-shake');
      }, 500);
    });
  </script>
</body>
</html>  